<template>
  <div>
    <div class="back" @click="tologin">
      <i class="el-icon-arrow-left"></i>交易明细
    </div>
    <div class="deal">
      <ul>
        <li @click="todeals">
          <div class="deal-left">
            <p class="p1">叫了只炸鸡 外卖订单</p>
            <span>2019-04-31</span>
          </div>
          <div class="deal-right">
            <p>-20.00</p>
            <span>支付成功</span>
          </div>
          <i class="el-icon-arrow-right"></i>
        </li>
        <li>
          <div class="deal-left">
            <p class="p1">叫了只炸鸡 外卖订单</p>
            <span>2019-04-31</span>
          </div>
          <div class="deal-right">
            <p>-20.00</p>
            <span>支付成功</span>
          </div>
          <i class="el-icon-arrow-right"></i>
        </li>
        <li>
          <div class="deal-left">
            <p class="p1">叫了只炸鸡 外卖订单</p>
            <span>2019-04-31</span>
          </div>
          <div class="deal-right">
            <p>-20.00</p>
            <span>支付成功</span>
          </div>
          <i class="el-icon-arrow-right"></i>
        </li>
        <li>
          <div class="deal-left">
            <p class="p1">这份小龙虾有点有点甜有点贵 外卖订单</p>
            <span>2019-04-31</span>
          </div>
          <div class="deal-right">
            <p>-20.00</p>
            <span>支付成功</span>
          </div>
          <i class="el-icon-arrow-right"></i>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  export default {
    methods: {
      tologin () {
        this.$router.push('/login')
      },
      todeals () {
        this.$router.push('/dealdetail/deals')
      }
    }
  }
</script>
<style lang="stylus" type="text/stylus">
  @import '../../common/stylus/mixin.styl'
  .back
    width :100%
    height :40px
    background-color :blue
    line-height :40px
    color :white
    padding-left :10px
    font-size :14px
    i
      margin-right :20px
  .deal
    margin-top :10px
    ul
      list-style :none
      li
        height :60px
        border-bottom :1px solid rgba(7,17,27,.1)
        line-height :30px
        padding-left :10px
        margin-top :2px
        box-shadow :1px 1px 2px #cccccc
        .deal-left
          display: inline-block
          width :70%
          border-right :1px solid rgba(7,17,27,.1)
          box-sizing :border-box
          p
            text-overflow :ellipsis
            overflow :hidden
            white-space :nowrap
          span
            font-size :10px
            color :#8c939d
        .deal-right
          display :inline-block
          width :20%
          p
            color :#dd6161
          span
            font-size :10px
            color :#8c939d
        i
          float :right
          line-height :60px

</style>
